<template>
  <div>
    <div id="map" />
    <button @click="del">删除圆形围栏</button>
    <button @click="delAll">删除所有围栏</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      circle: null
    }
  },
  mounted() {
    var map = new BMap.Map('map') // 创建Map实例
    this.map = map
    map.centerAndZoom(new BMap.Point(116.387112, 39.920977), 14) // 初始化地图,设置中心点坐标和地图级别
    // BMapGL.Point 创建一个地理点坐标
    map.enableScrollWheelZoom(true)
    // 创建多边形覆盖物(围栏)
    var polygon = new BMap.Polygon([
      new BMap.Point(116.387112, 39.920977),
      new BMap.Point(116.385243, 39.913063),
      new BMap.Point(116.394226, 39.917988),
      new BMap.Point(116.401772, 39.921364),
      new BMap.Point(116.41248, 39.927893)
    ], { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 })
    map.addOverlay(polygon) // 添加到地图覆盖物中

    var circle = new BMap.Circle(new BMap.Point(116.385243, 39.913063), 1000, { strokeColor: 'green', fillColor: 'pink' })
    this.circle = circle
    map.addOverlay(circle)// 添加到地图覆盖物中
  },
  methods: {
    del() {
      this.map && this.map.removeOverlay(this.circle)
    },
    delAll() {
      this.map.clearOverlays()
    }
  }
}
</script>
<style>
.anchorBL {
    /* 去除百度的标识 */
    display: none !important;
}
</style>
<style scoped>
#map{
    width: 80vw;
    height: 400px;
}

</style>
